<template>
  <vxe-modal height="50vh" :loading="loading" title="查看合同信息" v-model="dialogVisible" width="70%" showFooter show-zoom resize>
    <el-table  ref="table" highlight-current-row
              v-loading="loading" :data="htbzList"
              :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}">
      <!--      <el-table-column type="selection" width="55" align="center"/>-->
      <el-table-column label="序号" align="center" type="index" width="50"/>
      <el-table-column label="年度" align="center" prop="year" width="80">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.year" :value="scope.row.year"/>
        </template>
      </el-table-column>
      <el-table-column label="合同编号" align="center" prop="htBh" show-overflow-tooltip/>
      <el-table-column label="合同名称" align="center" prop="htName" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleButtonClick(scope.row)"
          >
            <el-link type="primary">{{ scope.row.htName }}</el-link>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="课题归属" align="center" prop="ktGs" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <dict-tag :options="dict.type.kylx_ktgs" :value="scope.row.ktGs"/>
        </template>
      </el-table-column>
      <el-table-column label="承担单位" align="center" prop="cdDw" show-overflow-tooltip/>
      <el-table-column label="负责人" align="center" prop="fzName"/>
      <el-table-column label="项目总经费(万元)" align="center" prop="xmZjf" width="130"/>
      <el-table-column label="甲方支付(万元)" align="center" prop="jfZf"/>
      <!--      <el-table-column label="关联项目" align="center" prop="glXm"/>-->
      <!--      <el-table-column label="项目申报ID" align="center" prop="xmsbId"/>-->
      <el-table-column label="起时间" align="center" prop="qTime" width="130">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.qTime, '{y}-{m}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="止时间" align="center" prop="zTime" width="130">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.zTime, '{y}-{m}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="processStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.process_business_status" :value="scope.row.processStatus" />
        </template>
      </el-table-column>
      <el-table-column label="录入人员" align="center" prop="lrRy"/>
      <el-table-column label="流程" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleJinDu(scope.row)"
            v-if="scope.row.processStatus !== 1"
          >查询进度</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 合同详情 -->
    <HtXq ref="htXq"/>

    <!-- 查询进度   -->
    <Jindu ref="picture" />

  </vxe-modal>
</template>

<script>
import {listHtbz} from "@/api/xmgl/htgl/htbz/htbz";
import HtXq from "@/views/xmgl/htgl/htbz/components/HtXq";
import Jindu from "@/views/components/liuChengState/jindu";

export default {
  name: "HtXx",
  components: {Jindu, HtXq},
 //合同信息
  dicts: ['htbz_mj', 'rcpt_zc', 'kylx_zcry_ktfg', 'year', 'kylx_ktgs', 'process_business_status'],
  data() {
    return {
      loading: false,
      dialogVisible: false,
      htbzList: [], //合同信息表格
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        htName: null,
        year: null,
        ktGs: null,
        glXm: null,
        xmsbId: null,
        processStatus: null,
        htBh: this.htBh,
        cdDw: null,
        userId: null,
        deptId: null
      },
    }
  },
  methods: {
    handleOpen(row) {
      this.loading = true;
      this.htBh = row.ktBh
      this.dialogVisible = true;
      this.getList()
    },
    getList() {
      this.queryParams.htBh = this.htBh
      listHtbz(this.queryParams).then(response => {
        this.htbzList = response.rows;
        this.total = response.total;
        setTimeout(() => {
          this.loading = false;
        }, 400)
      });
    },
    // 查询详情信息
    handleButtonClick(row) {
      this.$refs.htXq.handleOpen(row);
    },
    //查询进度
    handleJinDu(row) {
      this.$refs.picture.handleOpen(row);
    },
  }
}
</script>

<style scoped>

</style>
